$(function () {
    // 点击同意协议 ,隐藏协议页面.显示注册页面

    $('#protocol').on('click', function () {
        $(".reg-start").addClass('disn')
        $(".wanc").addClass('disn')
        $(".reg-user").removeClass('disn')

        // 步骤样式变化
        $(".reg-tip>div").eq(1).addClass('use').siblings().removeClass('use')

        $('.reg-tip').find('.use').find('.cir-un').addClass('cir-use')
        $('.reg-tip').find('.use').siblings().find('.cir-un').removeClass('cir-use')
    })





    // 注册 完成
    $('#submit').on("click", function () {
        let fl = true;


        //获取表单信息
        let uname = $('#name').val();
        let username = $('#username').val();
        let password = $('#password').val();

        // 判断测试结果,如果有一个false,那么就通不过
        for (const key in regF) {
            const el = regF[key];
            if (!el) {
                fl = false
            }
        }

        if (fl) {
            // 步骤样式变化
            $('.reg-3>span').addClass('cir-use');
            $('.reg-2>span').removeClass('cir-use');
            $(".reg-tip>div").eq(2).addClass('use').siblings().removeClass('use')
            // 如果符合跳转到成功页面
            $(".reg-start").addClass('disn')
            $(".wanc").removeClass('disn')
            $(".reg-user").addClass('disn')

            // 保存数据
            localStorage.setItem("uname", uname)
            localStorage.setItem("username", username)
            localStorage.setItem("password", password)

        } else {
            // alert('请完成一下输入的值!!')
        }

        return false
    })


    let regObj = {
        'name': /^[\u4e00-\u9fa5 ]{2,20}$/,
        'username': /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,
        'password': /^[a-zA-Z]\w{5,17}$/,
        'email': /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
        'tel': /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
    }

    let regF = {
        'name': false,
        'username': false,
        'password': false,
        'email': false,
        'tel': false,
        'rePassword': false
    }


    // 验证 表单的数据是否符合格式 ,不符合打印信息,并且保存结果
    $(':input').not('#yzm,#submit,select').on('focusout', function () {
        // 获取当前表单的类型
        let type = $(this).prop('id');
        // 获取当前表单的值
        let v = $(this).val()
        if (type == "rePassword") {
            // 确认密码
            if (v == $('#password').val() && v != "") {
                $(this).nextAll('.tips').find("img").prop('src', "./img/true.png").removeClass("disn").next('span').text("您输入的内容正确")
                regF[type] = true
            } else {
                $(this).nextAll('.tips').find("img").prop('src', "./img/false.png").removeClass("disn").next('span').text("您输入的内容有误")
                regF[type] = false
            }
        } else {
            // 如果是邮箱元素需要拼接
            if (type == "email") {
                v = v + "@" + $('#yxwei').val();
                console.log($(this).closest('li').find('.tips'));
            }
            // 根据正则对象 测试是否符合规则
            let result = regObj[type].test(v);
            // 根据对应的结果显示 相应的提示
            result ? $(this).nextAll('.tips').find("img").prop('src', "./img/true.png").removeClass("disn").next('span').text("您输入的内容正确") : $(this).nextAll('.tips').find("img").prop('src', "./img/false.png").removeClass("disn").next('span').text("您输入的内容有误")
            // 然后把当前对象的 测试结果保存到对应的属性上
            regF[type] = result;
        }
    })





})



